<template>
    <Time-selector v-model:periodString="periodString" :options="options"/>
    <div class="overall-statistics">
        <OverallViewer v-for="budget in baseBudgetInfo">
            <template #title>
                {{ budget.name }}
            </template>
            <template #amount>
                <div class="inside-box-amount" :style="'background-image:' + budget.background">
                    <span>{{ budget.amount }}</span>
                </div>
            </template>
            <template #link>
                <span @click="getRoute(budget.detailUrl)"> 详情 > </span>
            </template>
            <!-- {{ budget.name }},{{ budget.amount }} -->
        </OverallViewer>
    </div>
</template>

<script setup lang="ts">
import OverallViewer from '../components/overallViewer/index.vue'
import TimeSelector from '@/components/timeSelector/index.vue'
import {  onMounted, reactive, ref, watch, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import {getFinanceReport, getGeneralBudget} from '@/api/budget'
import getPeriod from '@/utils/getPeriod'
import { Period } from '@/types/config'
import moment from 'moment'

const $router = useRouter()
let periodString = ref('今日')
let period = reactive<Period>({
    begin:moment().startOf('day').format('YYYY-MM-DD'),
    end:moment().endOf('day').format('YYYY-MM-DD')
})
const options = ['今日', '昨日', '本月', '上月', '今年', '去年']

let baseBudgetInfo = ref([
    {
        name: '总收入',
        amount: 23850,
        detailUrl: '/statistics/income',
        background: 'radial-gradient(circle, white, rgb(31, 31, 239))'
    },
    {
        name: '总支出',
        amount: 19237,
        detailUrl: '/statistics/expenses',
        background: 'radial-gradient(circle, white, rgb(239, 138, 31))'
    },
    {
        name: '净收入',
        amount: 0,
        detailUrl: '/statistics/budget',
        background: 'radial-gradient(circle, white, rgb(31, 239, 59))'
    }
])

watch(periodString, () => {
    const time = getPeriod(periodString.value)
    period.begin = time.begin
    period.end = time.end
})

watchEffect(() => {
    baseBudgetInfo.value[2].amount = baseBudgetInfo.value[0].amount - baseBudgetInfo.value[1].amount
})

watchEffect(async () => {
    // 待改，api
    const result = await getGeneralBudget(period)
    baseBudgetInfo.value[0].amount = result.data.income || 0
    baseBudgetInfo.value[1].amount = result.data.outcome || 0
})

const getRoute = (url: string) => {
    $router.push(url)
}

onMounted(async()=>{
    // 当进入时，先判断是否是每个月的第一天。如果是，那么查看localstorage是否有date数据
    // 若存在date数据，则判断是否是今天，是今天则结束
    //若不是今天或者不存在date数据，则发起请求获得月报。
    
    if(moment().date()===1 && localStorage.getItem('date')!==moment().format('YYYY-MM-DD')){
        console.log(11111)
        localStorage.setItem('date',moment().format('YYYY-MM-DD'))
        window.location.href = 'http://192.168.43.221:8080/report/predict'
    }
        
        // element.setAttribute('href','192.168.43.221:8080/report/predict')
        // element.style.display = 'none'
        // document.body.appendChild(element)
        // await element.click()
        // document.body.removeChild(element)
    // }
})


</script>

<style scoped>


.overall-statistics {
    display: flex;
    justify-content: space-around;
    height: 90%;
    width: 100%;
}
</style>